@import "base";

@voiceBaseColor:#2792ff;
.voice-cover{
    .cover(88888,0.8);
    display: none;
    .voice-loading{
        position: relative;
        width: 186px;
        height: 186px;
        .border-radius(50%);
        background: #d1d7dd;
        border: #b7bcc1 1px solid;
        margin: 0 auto;
        margin-top: 80px;
    }
    
    .voice-icon-con{
        width: 166px;
        height: 166px;
        position: absolute;
        top: 9px;
        left: 9px;
        .border-radius(50%);
        .linear-gradient(top,#ffffff,#e6e7eb);
        border: #bec4c9 1px solid;
        text-align: center;
        
        .icon-yuyin{
            display: block;
            font-size: 48px;
            color:@voiceBaseColor;
            margin: 0 auto;
            margin-top: 40px;
        }
        .second{
            color: @deepFontColor;
            font-size: 18px;
            display: inline-block;
            margin-top: 3px;
            padding-left: 5px;
        }
        
    }
    .re-record{
        position: absolute;
        display: block;
        .linear-gradient(top,#ffffff,#e6e8eb);
        width: 60px;
        height: 60px;
        .border-radius(50%);
        top: 140px;
        left: 170px;
        font-size: 18px;
        color:@deepFontColor;
        text-align: center;
        line-height: 60px;
        text-underline: none;
        border: 1px solid #8d8e8f;
    }
    .re-record:hover{
        .linear-gradient(top,#e6e8eb,#ffffff);
    }
    
    .bottons{
        .display-flex;
        padding: 10px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        .voice-btn{
            display: block;
            .flex-num(1);
            .linear-gradient(top,#e6e8eb,#ffffff);
            font-size: 20px;
            color: @deepFontColor;
            height: 65px;
            line-height: 65px;
            text-align: center;
            .border-radius(4px);
            width: 50%;
        }
        .voice-btn:hover{
            .linear-gradient(top,#e6e8eb,#ffffff);
        }
        .cancel-btn{
            margin-right: 10px;
        }
        .end-btn{
            margin-left: 10px;
        }
    }
}
